﻿<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="keywords" content="页面模块" />
		<meta name="description" content="前端页面常用到的模块样式。" />
		<title>模块,页面模块-拼图Pintuer</title>
		<link href="pintuer.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
		<script src="jquery.js"></script>
		<script src="pintuer.js"></script>
		<script src="plugins/respond.js"></script>
		<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" />
		<link href="/favicon.ico" rel="bookmark icon" />
	</head>

	<body>
		<div class="layout doc-header fixed">
			<div class="container doc-naver">
				<div class="line">
					<div class="xs3 xm3 xb3 doc-logo">
						<button class="button icon-navicon margin-top float-right" data-target="#doc-header-pintuer">
						</button>
						<a href="index.html">
							<img src="images/logo.png" width="180" height="40" alt="拼图" class="ring-hover" />
						</a>
					</div>
					<div class="xl12 xs9 xm9 xb9 doc-nav">
						<ul class="nav nav-inline nav-navicon padding-small-top nav-menu" id="doc-header-pintuer">
							<li><a href="index.html">起步</a> </li>
							<li><a href="css.html">CSS</a> </li>
							<li><a href="widgets.html">元件</a> </li>
							<li><a href="javascript.html">JS组件</a> </li>
							<li><a href="react.html">常用</a></li>
							<li>
							<a href="react.html">其他工具<span class="arrow"></span></a>
							<ul class="drop-menu">
								<li><a href="tools/viewcode.html">代码预览工具</a></li>
								<li><a href="tools/setcolor.html">配色工具</a></li>
								<li><a href="tools/color.html">自定义颜色生成</a></li>
								<li><a href="http://www.box3.cn/">box3开发工具箱</a></li>
								<li><a href="https://tool.lu/">tool.lu工具箱</a></li>
							</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="bg-main doc-intro">
				<div class="container">
                        <h1 class="fadein-top">页面模块</h1>
                        <p class="fadein-bottom">前端页面常用到的模块样式。</p>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="line">
				<div class="xl12 xs12 xm9 xb9">
					<!--list.start-->
					<div class="doc-right">
						<h2 class="doc-h2" id="overview">
                        概述
                    </h2>
						<p class="doc-lead">
							模块为页面经常用到的结构性元素，是构成页面的主要内容。</p>
						<br />
						<br />
						<h2 class="doc-h2" id="header">
                        头部
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="header-demo">
                        基本样式
                    </h3>
						<p class="doc-readme">
							常用地头部包含标志、链接、服务热线、搜索等信息。</p>
						<h4 class="doc-title">
                        服务热线型
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container-layout padding-big-top padding-big-bottom">
									<div class="line">
										<div class="xs7 xm8 xb9">
											<a href="#">
												<img src="images/logo-gray.png" alt="拼图" />
											</a>
										</div>
										<div class="xs5 xm4 xb3 text-big padding-top">
											服务热线：400-123-4567</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container-layout padding-big-top padding-big-bottom">
    <div class="line">
        <div class="xs7 xm8 xb9">
            <a href="#">
                <img src="images/logo-gray.png" alt="拼图" />
            </a>
        </div>
        <div class="xs5 xm4 xb3 text-big padding-top">
            服务热线：400-123-4567</div>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        链接型
                    </h4>
						<div class="doc-input">
							右侧的服务热线采用链接型的，可以放置页面工具也简单的导航。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container-layout padding-big-top padding-big-bottom">
									<div class="line">
										<div class="xs7 xm8 xb9">
											<a href="#">
												<img src="images/logo-gray.png" alt="拼图" />
											</a>
										</div>
										<div class="xs5 xm4 xb3 padding-top">
											<a href="#" class="win-homepage">设为首页</a> <span class="text-little text-gray">|</span>
											<a href="#" class="win-favorite">加入收藏</a> <span class="text-little text-gray">|</span>
											<a href="#" class="win-print">打印页面</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container-layout padding-big-top padding-big-bottom">
    <div class="line">
        <div class="xs7 xm8 xb9">
            <a href="#">
                <img src="images/logo-gray.png" alt="拼图" />
            </a>
        </div>
        <div class="xs5 xm4 xb3 padding-top">
            <a href="#" class="win-homepage">设为首页</a> <span class="text-little text-gray">|</span>
            <a href="#" class="win-favorite">加入收藏</a> <span class="text-little text-gray">|</span>
            <a href="#" class="win-print">打印页面</a>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        搜索型
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container-layout padding-big-top padding-big-bottom">
									<div class="line">
										<div class="xs8 xm8 xb8">
											<a href="#">
												<img src="images/logo-gray.png" alt="拼图" />
											</a>
										</div>
										<div class="xs4 xm4 xb4">
											<form>
												<div class="input-group padding-little-top">
													<input type="text" class="input" name="keywords" size="30" placeholder="关键词" />
													<span class="addbtn">
                                                <button type="button" class="button">
                                                    搜!
                                                </button>
                                            </span>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container padding-big-top padding-big-bottom">
    <div class="line">
        <div class="xs8 xm8 xb8">
            <a href="#">
                <img src="images/logo-gray.png" alt="拼图" />
            </a>
        </div>
        <div class="xs4 xm4 xb4">
            <form>
            <div class="input-group padding-little-top">
                <input type="text" class="input" name="keywords" size="30" placeholder="关键词" />
                <span class="addbtn">
                    <button type="button" class="button">
                        搜!</button></span>
            </div>
            </form>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        含导航头部
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container-layout padding-big-top padding-big-bottom">
									<div class="line">
										<div class="xl12 xs5 xm6 xb7">
											<button class="button icon-navicon float-right" data-target="#header-demo1">
											</button>
											<a href="#">
												<img src="images/logo-gray.png" alt="拼图" />
											</a>
										</div>
										<div class="xl12 xs7 xm6 xb5 padding-small-top">
											<ul class="nav nav-menu nav-inline nav-navicon" id="header-demo1">
												<li><a href="#">首页</a> </li>
												<li><a href="#">CSS</a> </li>
												<li class="active"><a href="#">元件<span class="arrow"></span></a>
													<ul class="drop-menu">
														<li><a href="#">概述</a> </li>
														<li><a href="#">网格系统<span class="arrow"></span></a>
															<ul>
																<li><a href="#">响应式布局</a> </li>
																<li><a href="#">非响应式布局</a> </li>
															</ul>
														</li>
														<li><a href="#">图标</a> </li>
													</ul>
												</li>
												<li><a href="#">更多<span class="arrow"></span></a>
													<ul class="drop-menu">
														<li><a href="#">组件</a> </li>
														<li><a href="#">模块<span class="arrow"></span></a>
															<ul>
																<li><a href="#">头部</a> </li>
																<li><a href="#">导航</a> </li>
																<li><a href="#">底部</a> </li>
															</ul>
														</li>
													</ul>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container-layout padding-big-top padding-big-bottom">
    <div class="line">
        <div class="xl12 xs5 xm6 xb7">
            <button class="button icon-navicon float-right" data-target="#header-demo1">
            </button>
            <a href="#">
                <img src="images/logo-gray.png" alt="拼图" />
            </a>
        </div>
        <div class="xl12 xs7 xm6 xb5 padding-small-top">
            <ul class="nav nav-menu nav-inline nav-navicon" id="header-demo1">
                <li><a href="#">首页</a> </li>
                <li><a href="#">CSS</a> </li>
                <li class="active"><a href="#">元件<span class="arrow"></span></a>
                    <ul class="drop-menu">
                        <li><a href="#">概述</a> </li>
                        <li><a href="#">网格系统<span class="arrow"></span></a>
                            <ul>
                                <li><a href="#">响应式布局</a> </li>
                                <li><a href="#">非响应式布局</a> </li>
                            </ul>
                        </li>
                        <li><a href="#">图标</a> </li>
                    </ul>
                </li>
                <li><a href="#">更多<span class="arrow"></span></a>
                    <ul class="drop-menu">
                        <li><a href="#">组件</a> </li>
                        <li><a href="#">模块<span class="arrow"></span></a>
                            <ul>
                                <li><a href="#">头部</a> </li>
                                <li><a href="#">导航</a> </li>
                                <li><a href="#">底部</a> </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="header-search">
                        综合型头部
                    </h3>
						<p class="doc-readme">
							头部包含搜索的信息。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container-layout padding-big-top padding-big-bottom">
									<div class="line">
										<div class="xl12 xs2 xm2 xb1">
											<button class="button icon-navicon float-right" data-target="#header-demo2">
											</button>
											<img src="images/40.png" />
										</div>
										<div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo2">
											<div class="xs8 xm8 xb6">
												<ul class="nav nav-menu nav-inline">
													<li><a href="#">首页</a> </li>
													<li><a href="#">CSS</a> </li>
													<li class="active"><a href="#">元件<span class="arrow"></span></a>
														<ul class="drop-menu">
															<li><a href="#">概述</a> </li>
															<li><a href="#">网格系统<span class="arrow"></span></a>
																<ul>
																	<li><a href="#">响应式布局</a> </li>
																	<li><a href="#">非响应式布局</a> </li>
																</ul>
															</li>
															<li><a href="#">图标</a> </li>
														</ul>
													</li>
													<li><a href="#">更多<span class="arrow"></span></a>
														<ul class="drop-menu">
															<li><a href="#">组件</a> </li>
															<li><a href="#">模块<span class="arrow"></span></a>
																<ul>
																	<li><a href="#">头部</a> </li>
																	<li><a href="#">导航</a> </li>
																	<li><a href="#">底部</a> </li>
																</ul>
															</li>
														</ul>
													</li>
												</ul>
											</div>
											<div class="xs4 xm4 xb3">
												<form>
													<div class="input-group padding-little-top">
														<input type="text" class="input border-main" name="keywords" size="30" placeholder="关键词" />
														<span class="addbtn">
                                                    <button type="button" class="button bg-main">
                                                        搜!
                                                    </button>
                                                </span>
													</div>
												</form>
											</div>
											<div class="hidden-s hidden-m xb2 xb1-move">
												<div class="xl6 xb12 text-red">
													400-123-4567</div>
												<div class="xl6 xb12 text-small">
													<a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container-layout padding-big-top padding-big-bottom">
    <div class="line">
        <div class="xl12 xs2 xm2 xb1">
            <button class="button icon-navicon float-right" data-target="#header-demo2">
            </button>
            <img src="images/40.png" />
        </div>
        <div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo2">
            <div class="xs8 xm8 xb6">
                <ul class="nav nav-menu nav-inline">
                    <li><a href="#">首页</a> </li>
                    <li><a href="#">CSS</a> </li>
                    <li class="active"><a href="#">元件<span class="arrow"></span></a>
                        <ul class="drop-menu">
                            <li><a href="#">概述</a> </li>
                            <li><a href="#">网格系统<span class="arrow"></span></a>
                                <ul>
                                    <li><a href="#">响应式布局</a> </li>
                                    <li><a href="#">非响应式布局</a> </li>
                                </ul>
                            </li>
                            <li><a href="#">图标</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">更多<span class="arrow"></span></a>
                        <ul class="drop-menu">
                            <li><a href="#">组件</a> </li>
                            <li><a href="#">模块<span class="arrow"></span></a>
                                <ul>
                                    <li><a href="#">头部</a> </li>
                                    <li><a href="#">导航</a> </li>
                                    <li><a href="#">底部</a> </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="xs4 xm4 xb3">
                <form>
                <div class="input-group padding-little-top">
                    <input type="text" class="input border-main" name="keywords" size="30" placeholder="关键词" />
                    <span class="addbtn">
                        <button type="button" class="button bg-main">
                            搜!</button></span>
                </div>
                </form>
            </div>
            <div class="hidden-s hidden-m xb2 xb1-move">
                <div class="xl6 xb12 text-red">
                    400-123-4567</div>
                <div class="xl6 xb12 text-small">
                    <a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a>
                </div>
            </div>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        包含顶部工具
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="layout bg hidden-l">
									<div class="container-layout height-big">
										<span class="float-right"><a href="#">注册</a> <span class="text-little text-gray">|</span>
										<a href="#">登录</a> <span class="text-little text-gray">|</span> <a href="#">联系</a>
										</span>欢迎使用拼图前端框架
									</div>
								</div>
								<div class="container-layout padding-big-top padding-big-bottom">
									<div class="line">
										<div class="xl12 xs2 xm2 xb1">
											<button class="button icon-navicon float-right" data-target="#header-demo3">
											</button>
											<img src="images/40.png" />
										</div>
										<div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo3">
											<div class="xs8 xm8 xb6">
												<ul class="nav nav-menu nav-inline">
													<li><a href="#">首页</a> </li>
													<li><a href="#">CSS</a> </li>
													<li class="active"><a href="#">元件<span class="arrow"></span></a>
														<ul class="drop-menu">
															<li><a href="#">概述</a> </li>
															<li><a href="#">网格系统<span class="arrow"></span></a>
																<ul>
																	<li><a href="#">响应式布局</a> </li>
																	<li><a href="#">非响应式布局</a> </li>
																</ul>
															</li>
															<li><a href="#">图标</a> </li>
														</ul>
													</li>
													<li><a href="#">更多<span class="arrow"></span></a>
														<ul class="drop-menu">
															<li><a href="#">组件</a> </li>
															<li><a href="#">模块<span class="arrow"></span></a>
																<ul>
																	<li><a href="#">头部</a> </li>
																	<li><a href="#">导航</a> </li>
																	<li><a href="#">底部</a> </li>
																</ul>
															</li>
														</ul>
													</li>
												</ul>
											</div>
											<div class="xs4 xm4 xb3">
												<form>
													<div class="input-group padding-little-top">
														<input type="text" class="input border-main" name="keywords" size="30" placeholder="关键词" />
														<span class="addbtn">
                                                    <button type="button" class="button bg-main">
                                                        搜!
                                                    </button>
                                                </span>
													</div>
												</form>
											</div>
											<div class="hidden-s hidden-m xb2 xb1-move">
												<div class="xl6 xb12 text-red">
													400-123-4567</div>
												<div class="xl6 xb12 text-small">
													<a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="layout bg hidden-l">
    <div class="container-layout height-big">
        <span class="float-right"><a href="#">注册</a> <span class="text-little text-gray">|</span>
            <a href="#">登录</a> <span class="text-little text-gray">|</span> <a href="#">联系</a>
        </span>欢迎使用拼图前端框架
    </div>
</div>
<div class="container-layout padding-big-top padding-big-bottom">
    <div class="line">
        <div class="xl12 xs2 xm2 xb1">
            <button class="button icon-navicon float-right" data-target="#header-demo3">
            </button>
            <img src="images/40.png" />
        </div>
        <div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo3">
            <div class="xs8 xm8 xb6">
                <ul class="nav nav-menu nav-inline">
                    <li><a href="#">首页</a> </li>
                    <li><a href="#">CSS</a> </li>
                    <li class="active"><a href="#">元件<span class="arrow"></span></a>
                        <ul class="drop-menu">
                            <li><a href="#">概述</a> </li>
                            <li><a href="#">网格系统<span class="arrow"></span></a>
                                <ul>
                                    <li><a href="#">响应式布局</a> </li>
                                    <li><a href="#">非响应式布局</a> </li>
                                </ul>
                            </li>
                            <li><a href="#">图标</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">更多<span class="arrow"></span></a>
                        <ul class="drop-menu">
                            <li><a href="#">组件</a> </li>
                            <li><a href="#">模块<span class="arrow"></span></a>
                                <ul>
                                    <li><a href="#">头部</a> </li>
                                    <li><a href="#">导航</a> </li>
                                    <li><a href="#">底部</a> </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="xs4 xm4 xb3">
                <form>
                <div class="input-group padding-little-top">
                    <input type="text" class="input border-main" name="keywords" size="30" placeholder="关键词" />
                    <span class="addbtn">
                        <button type="button" class="button bg-main">
                            搜!</button></span>
                </div>
                </form>
            </div>
            <div class="hidden-s hidden-m xb2 xb1-move">
                <div class="xl6 xb12 text-red">
                    400-123-4567</div>
                <div class="xl6 xb12 text-small">
                    <a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a>
                </div>
            </div>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="header-inverse">
                        背景反色
                    </h3>
						<p class="doc-readme">
							当用深色背景时的使用方法。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="layout bg-black bg-inverse hidden-l">
									<div class="container-layout height-big">
										<span class="float-right"><a href="#">注册</a> <span class="text-little text-gray">|</span>
										<a href="#">登录</a> <span class="text-little text-gray">|</span> <a href="#">联系</a>
										</span>欢迎使用拼图前端框架
									</div>
								</div>
								<div class="container-layout padding-big-top padding-big-bottom bg-green bg-inverse">
									<div class="line">
										<div class="xl12 xs2 xm2 xb1">
											<button class="button icon-navicon float-right bg-white" data-target="#header-demo4">
											</button>
											<img src="images/40-white.png" />
										</div>
										<div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo4">
											<div class="xs8 xm8 xb6">
												<ul class="nav nav-menu nav-inline nav-pills">
													<li><a href="#">首页</a> </li>
													<li><a href="#">CSS</a> </li>
													<li class="active"><a href="#">元件<span class="arrow"></span></a>
														<ul class="drop-menu">
															<li><a href="#">概述</a> </li>
															<li><a href="#">网格系统<span class="arrow"></span></a>
																<ul>
																	<li><a href="#">响应式布局</a> </li>
																	<li><a href="#">非响应式布局</a> </li>
																</ul>
															</li>
															<li><a href="#">图标</a> </li>
														</ul>
													</li>
													<li><a href="#">更多<span class="arrow"></span></a>
														<ul class="drop-menu">
															<li><a href="#">组件</a> </li>
															<li><a href="#">模块<span class="arrow"></span></a>
																<ul>
																	<li><a href="#">头部</a> </li>
																	<li><a href="#">导航</a> </li>
																	<li><a href="#">底部</a> </li>
																</ul>
															</li>
														</ul>
													</li>
												</ul>
											</div>
											<div class="xs4 xm4 xb3">
												<form>
													<div class="input-group padding-little-top">
														<input type="text" class="input" name="keywords" size="30" placeholder="关键词" />
														<span class="addbtn">
                                                    <button type="button" class="button bg">
                                                        搜!
                                                    </button>
                                                </span>
													</div>
												</form>
											</div>
											<div class="hidden-s hidden-m xb2 xb1-move">
												<div class="xl6 xb12 text-red">
													400-123-4567</div>
												<div class="xl6 xb12 text-small">
													<a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="layout bg-black bg-inverse hidden-l">
    <div class="container-layout height-big">
        <span class="float-right"><a href="#">注册</a> <span class="text-little text-gray">|</span>
            <a href="#">登录</a> <span class="text-little text-gray">|</span> <a href="#">联系</a>
        </span>欢迎使用拼图前端框架
    </div>
</div>
<div class="container-layout padding-big-top padding-big-bottom bg-green bg-inverse">
    <div class="line">
        <div class="xl12 xs2 xm2 xb1">
            <button class="button icon-navicon float-right bg-white" data-target="#header-demo4">
            </button>
            <img src="images/40-white.png" />
        </div>
        <div class=" xl12 xs10 xm10 xb11 padding-top nav-navicon" id="header-demo4">
            <div class="xs8 xm8 xb6">
                <ul class="nav nav-menu nav-inline nav-pills">
                    <li><a href="#">首页</a> </li>
                    <li><a href="#">CSS</a> </li>
                    <li class="active"><a href="#">元件<span class="arrow"></span></a>
                        <ul class="drop-menu">
                            <li><a href="#">概述</a> </li>
                            <li><a href="#">网格系统<span class="arrow"></span></a>
                                <ul>
                                    <li><a href="#">响应式布局</a> </li>
                                    <li><a href="#">非响应式布局</a> </li>
                                </ul>
                            </li>
                            <li><a href="#">图标</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">更多<span class="arrow"></span></a>
                        <ul class="drop-menu">
                            <li><a href="#">组件</a> </li>
                            <li><a href="#">模块<span class="arrow"></span></a>
                                <ul>
                                    <li><a href="#">头部</a> </li>
                                    <li><a href="#">导航</a> </li>
                                    <li><a href="#">底部</a> </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="xs4 xm4 xb3">
                <form>
                <div class="input-group padding-little-top">
                    <input type="text" class="input" name="keywords" size="30" placeholder="关键词" />
                    <span class="addbtn">
                        <button type="button" class="button bg">
                            搜!</button></span>
                </div>
                </form>
            </div>
            <div class="hidden-s hidden-m xb2 xb1-move">
                <div class="xl6 xb12 text-red">
                    400-123-4567</div>
                <div class="xl6 xb12 text-small">
                    <a href="#" class="win-homepage">设为首页</a> | <a href="#" class="win-favorite">加入收藏</a>
                </div>
            </div>
        </div>
    </div>
</div>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="navbar">
                        导航条
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="navbar-demo">
                        基本样式
                    </h3>
						<p class="doc-readme">
							构建适用于手机、平板及电脑使用的导航条。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar">
									<div class="navbar-head">
										<button class="button icon-navicon" data-target="#navbar1">
										</button>
										<a href="#">
											<img src="images/30.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar1">
										<ul class="nav nav-inline nav-menu">
											<li><a href="#">首页</a> </li>
											<li><a href="#">CSS</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar">
    <div class="navbar-head">
        <button class="button icon-navicon" data-target="#navbar1">
        </button>
        <a href="#">
            <img src="images/30.png" />
        </a>
    </div>
    <div class="navbar-body nav-navicon" id="navbar1">
        <ul class="nav nav-inline nav-menu">
            <li><a href="#">首页</a> </li>
            <li><a href="#">CSS</a> </li>
            <li class="active"><a href="#">元件<span class="arrow"></span></a>
                <ul class="drop-menu">
                    <li><a href="#">概述</a> </li>
                    <li><a href="#">网格系统<span class="arrow"></span></a>
                        <ul>
                            <li><a href="#">响应式布局</a> </li>
                            <li><a href="#">非响应式布局</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">图标</a> </li>
                </ul>
            </li>
            <li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
                <ul class="drop-menu">
                    <li><a href="#">组件</a> </li>
                    <li><a href="#">模块<span class="arrow"></span></a>
                        <ul>
                            <li><a href="#">头部</a> </li>
                            <li><a href="#">导航</a> </li>
                            <li><a href="#">底部</a> </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="navbar-form navbar-left">
            <form>
            <input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词" />
            <input type="submit" name="search" value="搜索" class="button" />
            </form>
        </div>
        <div class="navbar-text navbar-right hidden-s">
            文本 <a href="#">链接</a>
            <button type="button" class="button">
                按钮</button>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        胶囊导航条
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar">
									<div class="navbar-head">
										<button class="button icon-navicon" data-target="#navbar2">
										</button>
										<a href="#">
											<img src="images/30.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar2">
										<ul class="nav nav-inline nav-menu nav-pills">
											<li><a href="#">首页</a> </li>
											<li><a href="#">CSS</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto radius-rounded" name="keywords" size="15" placeholder="关键词" />
												<button type="submit" name="search" class="button radius-rounded icon-search">
													搜索</button>
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar">
    ...
    <div class="navbar-body nav-navicon">
        <ul class="nav nav-inline nav-menu nav-pills">
            ...</ul>
        ...
    </div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="navbar-units">
                        组成元件
                    </h3>
						<p class="doc-readme">
							导航条的组成包含标志、导航、文本、按钮等元件。</p>
						<h4 class="doc-title">
                        标志
                    </h4>
						<div class="doc-input">
							将导航条头部的图片替换成你的标志，高度为24px或30px，使用24px的标志时给图片加.logo样式，主要为内填充作用。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar">
									<div class="navbar-head">
										<a href="#">
											<img class="logo" src="images/24.png" />
										</a>
									</div>
								</div>
								<br />
								<div class="navbar">
									<div class="navbar-head">
										<a href="#">
											<img src="images/30.png" />
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar">
    <div class="navbar-head">
        <a href="#">
            <img class="logo" src="images/24.png" />
        </a>
    </div>
</div>
<div class="navbar">
    <div class="navbar-head">
        <a href="#">
            <img src="images/30.png" />
        </a>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        导航
                    </h4>
						<div class="doc-input">
							导航条中放置内联导航模块。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar">
									<div class="navbar-head">
										<button class="button icon-navicon" data-target="#navbar-nav1">
										</button>
										<a href="#">
											<img src="images/30.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-nav1">
										<ul class="nav nav-inline nav-menu">
											<li><a href="#">首页</a> </li>
											<li><a href="#">CSS</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar clearfix">
    <div class="navbar-head">
        <button class="button icon-navicon" data-target="#navbar-demo2">
        </button>
        <a href="#">
            <img class="logo" src="images/24.png" />
        </a>
    </div>
    <div class="navbar-body nav-navicon" id="navbar-demo2">
        <ul class="nav nav-inline nav-menu">
            <li class="active"><a href="#">首页</a> </li>
            <li><a href="#">新闻</a> </li>
            <li><a href="#">产品<span class="arrow"></span></a>
                <ul class="drop-menu">
                    <li><a href="#"><span class="arrow"></span>类别</a>
                        <ul>
                            <li><a href="#">电子产品</a> </li>
                            <li><a href="#">速卖产品</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">品牌</a> </li>
                </ul>
            </li>
            <li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
                <ul class="drop-menu">
                    <li><a href="#">组件</a> </li>
                    <li><a href="#">模块<span class="arrow"></span></a>
                        <ul>
                            <li><a href="#">头部</a> </li>
                            <li><a href="#">导航</a> </li>
                            <li><a href="#">底部</a> </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        表单
                    </h4>
						<div class="doc-input">
							导航条中放置表单模块，如搜索。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar">
									<div class="navbar-head">
										<button class="button icon-navicon" data-target="#navbar-nav2">
										</button>
										<a href="#">
											<img src="images/30.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-nav2">
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button" />
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar">
    <div class="navbar-head">
        <button class="button icon-navicon" data-target="#navbar-nav2">
        </button>
        <a href="#">
            <img src="images/30.png" />
        </a>
    </div>
    <div class="navbar-body nav-navicon" id="navbar-nav2">
        <div class="navbar-form navbar-left">
            <form>
            <input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词" />
            <input type="submit" name="search" value="搜索" class="button" />
            </form>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        文本链接及按钮
                    </h4>
						<div class="doc-input">
							在导航条中可以直接使用文本、链接或者按钮。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar">
									<div class="navbar-head">
										<button class="button icon-navicon" data-target="#navbar-nav3">
										</button>
										<a href="#">
											<img src="images/30.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-nav3">
										<div class="navbar-text navbar-left">
											文本 <a href="#">链接</a>
											<button type="button" class="button">
												按钮</button>
										</div>
									</div>
								</div>
								<br />
								<div class="navbar">
									<div class="navbar-head">
										<button class="button icon-navicon" data-target="#navbar-nav4">
										</button>
										<a href="#">
											<img src="images/30.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-nav4">
										<div class="navbar-text navbar-right">
											文本 <a href="#">链接</a>
											<button type="button" class="button">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar">
    <div class="navbar-head">
        <button class="button icon-navicon" data-target="#navbar-nav3">
        </button>
        <a href="#">
            <img src="images/30.png" />
        </a>
    </div>
    <div class="navbar-body nav-navicon" id="navbar-nav3">
        <div class="navbar-text navbar-right">
            文本<a href="#">链接</a>
            <button type="button" class="button">
                按钮</button>
        </div>
    </div>
</div>
<div class="navbar">
    <div class="navbar-head">
        <button class="button icon-navicon" data-target="#navbar-nav4">
        </button>
        <a href="#">
            <img src="images/30.png" />
        </a>
    </div>
    <div class="navbar-body nav-navicon" id="navbar-nav4">
        <div class="navbar-text navbar-right">
            文本 <a href="#">链接</a>
            <button type="button" class="button">
                按钮</button>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="navbar-bg">
                        导航条背景色
                    </h3>
						<p class="doc-readme">
							给导航条添加bg-(*)系列样式，给导航条添加背景色彩。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar bg-red bg-inverse radius">
									<div class="navbar-head">
										<button class="button bg icon-navicon" data-target="#navbar-bg1">
										</button>
										<a href="#">
											<img src="images/30-white.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-bg1">
										<ul class="nav nav-inline nav-menu">
											<li><a href="#">首页</a> </li>
											<li><a href="#">CSS</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto border-white" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button bg-white" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button bg-white">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar bg-red bg-inverse radius">
    <div class="navbar-head">
        <button class="button bg icon-navicon" data-target="#navbar-bg1">
        </button>
        <a href="#">
            <img src="images/30-white.png" />
        </a>
    </div>
    <div class="navbar-body nav-navicon" id="navbar-bg1">
        <ul class="nav nav-inline nav-menu">
            <li><a href="#">首页</a> </li>
            <li><a href="#">CSS</a> </li>
            <li class="active"><a href="#">元件<span class="arrow"></span></a>
                <ul class="drop-menu">
                    <li><a href="#">概述</a> </li>
                    <li><a href="#">网格系统<span class="arrow"></span></a>
                        <ul>
                            <li><a href="#">响应式布局</a> </li>
                            <li><a href="#">非响应式布局</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">图标</a> </li>
                </ul>
            </li>
            <li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
                <ul class="drop-menu">
                    <li><a href="#">组件</a> </li>
                    <li><a href="#">模块<span class="arrow"></span></a>
                        <ul>
                            <li><a href="#">头部</a> </li>
                            <li><a href="#">导航</a> </li>
                            <li><a href="#">底部</a> </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="navbar-form navbar-left">
            <form>
            <input type="text" class="input input-auto border-white" name="keywords" size="15"
                placeholder="关键词" />
            <input type="submit" name="search" value="搜索" class="button bg-white" />
            </form>
        </div>
        <div class="navbar-text navbar-right hidden-s">
            文本 <a href="#">链接</a>
            <button type="button" class="button bg-white">
                按钮</button>
        </div>
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        标签导航条
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar bg-yellow bg-inverse radius">
									<div class="navbar-head">
										<button class="button bg icon-navicon" data-target="#navbar-bg2">
										</button>
										<a href="#">
											<img src="images/30-white.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-bg2">
										<ul class="nav nav-inline nav-menu nav-tabs">
											<li><a href="#">首页</a> </li>
											<li><a href="#">CSS</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto border-white" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button bg-white" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button bg-white">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar bg-yellow bg-inverse radius">
    ...
    <div class="navbar-body nav-navicon" id="navbar-bg2">
        <ul class="nav nav-inline nav-menu nav-tabs">
            ...</ul>
        ...
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        胶囊导航条
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar bg-blue bg-inverse radius">
									<div class="navbar-head">
										<button class="button bg icon-navicon" data-target="#navbar-bg3">
										</button>
										<a href="#">
											<img src="images/30-white.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-bg3">
										<ul class="nav nav-inline nav-menu nav-pills">
											<li><a href="#">首页</a> </li>
											<li><a href="#">CSS</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto border-white" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button bg-white" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button bg-white">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar bg-blue bg-inverse radius">
    ...
    <div class="navbar-body nav-navicon" id="navbar-bg3">
        <ul class="nav nav-inline nav-menu nav-pills">
            ...</ul>
        ...
    </div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="navbar-big">
                        大导航条
                    </h3>
						<p class="doc-readme">
							大导航条效果</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar">
									<div class="navbar-head">
										<button class="button bg icon-navicon" data-target="#navbar-big1">
										</button>
										<a href="#">
											<img src="images/30.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-big1">
										<ul class="nav nav-inline nav-menu nav-big">
											<li><a href="#">首页</a> </li>
											<li><a href="#">CSS</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button bg-white">
												按钮</button>
										</div>
									</div>
								</div>
								<br />
								<br />
								<div class="navbar navbar-big bg-red bg-inverse radius">
									<div class="navbar-head">
										<button class="button bg icon-navicon" data-target="#navbar-big2">
										</button>
										<a href="#">
											<img class="logo" src="images/36-white.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-big2">
										<ul class="nav nav-inline nav-menu nav-big">
											<li><a href="#">首页</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto border-white" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button bg-white" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button bg-white">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar">
    ...
    <div class="navbar-body nav-navicon">
        <ul class="nav nav-inline nav-menu nav-big">
            ...</ul>
        ...
    </div>
</div>
<div class="navbar navbar-big bg-red bg-inverse radius">
    ...
    <div class="navbar-body nav-navicon">
        <ul class="nav nav-inline nav-menu">
            ...</ul>
        ...
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        大号标签导航条
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar navbar-big bg-yellow bg-inverse radius">
									<div class="navbar-head">
										<button class="button bg icon-navicon" data-target="#navbar-big3">
										</button>
										<a href="#">
											<img class="logo" src="images/36-white.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-big3">
										<ul class="nav nav-inline nav-menu nav-tabs nav-big">
											<li><a href="#">首页</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto border-white" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button bg-white" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button bg-white">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar navbar-big bg-yellow bg-inverse radius">
    ...
    <div class="navbar-body nav-navicon">
        <ul class="nav nav-inline nav-menu nav-tabs nav-big">
            ...</ul>
        ...
    </div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        大号胶囊导航条
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="navbar navbar-big">
									<div class="navbar-head">
										<button class="button bg icon-navicon" data-target="#navbar-big4">
										</button>
										<a href="#">
											<img class="logo" src="images/36.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-big4">
										<ul class="nav nav-inline nav-menu nav-pills nav-big">
											<li><a href="#">首页</a> </li>
											<li><a href="#">CSS</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button bg-white">
												按钮</button>
										</div>
									</div>
								</div>
								<br />
								<br />
								<div class="navbar navbar-big bg-blue bg-inverse radius">
									<div class="navbar-head">
										<button class="button bg icon-navicon" data-target="#navbar-big5">
										</button>
										<a href="#">
											<img class="logo" src="images/36-white.png" />
										</a>
									</div>
									<div class="navbar-body nav-navicon" id="navbar-big5">
										<ul class="nav nav-inline nav-menu nav-pills nav-big">
											<li><a href="#">首页</a> </li>
											<li class="active"><a href="#">元件<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">概述</a> </li>
													<li><a href="#">网格系统<span class="arrow"></span></a>
														<ul>
															<li><a href="#">响应式布局</a> </li>
															<li><a href="#">非响应式布局</a> </li>
														</ul>
													</li>
													<li><a href="#">图标</a> </li>
												</ul>
											</li>
											<li class="nav-more"><a href="#">更多<span class="arrow"></span></a>
												<ul class="drop-menu">
													<li><a href="#">组件</a> </li>
													<li><a href="#">模块<span class="arrow"></span></a>
														<ul>
															<li><a href="#">头部</a> </li>
															<li><a href="#">导航</a> </li>
															<li><a href="#">底部</a> </li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
										<div class="navbar-form navbar-left">
											<form>
												<input type="text" class="input input-auto border-white" name="keywords" size="15" placeholder="关键词" />
												<input type="submit" name="search" value="搜索" class="button bg-white" />
											</form>
										</div>
										<div class="navbar-text navbar-right hidden-s">
											文本 <a href="#">链接</a>
											<button type="button" class="button bg-white">
												按钮</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="navbar navbar-big">
    ...
    <div class="navbar-body nav-navicon">
        <ul class="nav nav-inline nav-menu nav-pills nav-big">
            ...</ul>
        ...
    </div>
</div>
<div class="navbar navbar-big bg-blue bg-inverse radius">
    ...
    <div class="navbar-body nav-navicon">
        <ul class="nav nav-inline nav-menu nav-pills nav-big">
            ...</ul>
        ...
    </div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="navbar-fixed">
                        固定在顶部或底部
                    </h3>
						<p class="doc-readme">
							将导航固定的页面的顶部或者尾部。</p>
						<h4 class="doc-title">
                        固定在顶部
                    </h4>
						<div class="doc-input">
							给导航条或放置导航条的元素添加.fixed-top样式，即将元素固定的顶部。</div>
						<div class="doc-code">
<xmp>
<div class="layout fixed-top">
    <div class="container">
        ...</div>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        固定在底部
                    </h4>
						<div class="doc-input">
							给导航条或放置导航条的元素添加.fixed-bottom样式，即将元素固定的底部；滑动菜单、LOGO、列表、底角、内容请自行增加。</div>
						<div class="doc-code">
<xmp>
<div class="layout fixed-bottom">
    <div class="container">
        ...</div>
</div>
</xmp>
						</div>
						<br />
						<br />
						<h3 class="doc-h3" id="navbar-slidemenu">
                        滑动导航<span class="tag bg-yellow">新增</span>
                    </h3>
						<p class="doc-readme">
							左侧/右侧滑动导航</p>
						<h4 class="doc-title">
                        左侧滑动导航
                    </h4>
					<div class="doc-input">
					默认设置div样式class="slidemenu-left"。</div>
					<div class="doc-demoview doc-viewad0 ">
						<div class="view-body">
							<div class="slidemenu">
								<div class="slidemenu-left">
									<div class="slidemenu-head">
										//导航LOGO
									</div>
									<div class="slidemenu-body">
										//导航列表
									</div>
									<div class="slidemenu-foot">
										//导航底部
									</div>
								</div>
								<div class="slidemenu-content">
									<div class="slidemenu-head bg-main">
										<span class="icon-slidemenu"></span>
									</div>
									<div class="slidemenu-body">
										//内容
									</div>
									<div class="slidemenu-foot">
										//内容底部
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="doc-democode doc-codead0 ">
<xmp pt_select="on" class="">
<div class="slidemenu">
	<div class="slidemenu-left">
		<div class="slidemenu-head">
			//导航LOGO
		</div>
		<div class="slidemenu-body">
			//导航列表
		</div>
		<div class="slidemenu-foot">
			//导航底部
		</div>
	</div>
	<div class="slidemenu-content">
		<div class="slidemenu-head bg-main">
			<span class="icon-slidemenu"></span>
		</div>
		<div class="slidemenu-body">
			//内容
		</div>
		<div class="slidemenu-foot">
			//内容底部
		</div>
	</div>
</div>
</xmp>
					</div>
						<h4 class="doc-title">
                        右侧滑动导航
                    </h4>
					<div class="doc-input">
							设置div样式class="slidemenu-right"，并设置图标text-right，居右；滑动菜单、LOGO、列表、底角、内容请自行增加。</div>
					<div class="doc-demoview doc-viewad0 ">
						<div class="view-body">
							<div class="slidemenu">
								<div class="slidemenu-right">
									<div class="slidemenu-head">
										//导航LOGO
									</div>
									<div class="slidemenu-body">
										//导航列表
									</div>
									<div class="slidemenu-foot">
										//导航底部
									</div>
								</div>
								<div class="slidemenu-content">
									<div class="slidemenu-head bg-main text-right">
										<span class="icon-slidemenu"></span>
									</div>
									<div class="slidemenu-body">
										//内容
									</div>
									<div class="slidemenu-foot">
										//内容底部
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="doc-democode doc-codead0 ">
<xmp pt_select="on" class="">
<div class="slidemenu">
	<div class="slidemenu-right">
		<div class="slidemenu-head">
			//导航LOGO
		</div>
		<div class="slidemenu-body">
			//导航列表
		</div>
		<div class="slidemenu-foot">
			//导航底部
		</div>
	</div>
	<div class="slidemenu-content">
		<div class="slidemenu-head bg-main text-right">
			<span class="icon-slidemenu"></span>
		</div>
		<div class="slidemenu-body">
			//内容
		</div>
		<div class="slidemenu-foot">
			//内容底部
		</div>
	</div>
</div>
</xmp>
					</div>
						<br />
						<br />
						<h2 class="doc-h2" id="bread">
                        面包屑
                    </h2>
						<p class="doc-lead">
							页面内使用的路径导航，显示当前页面所在的位置。</p>
						<h3 class="doc-h3" id="bread-local">
                        路径导航
                    </h3>
						<p class="doc-readme">
							页面的面包屑导航，引导用户查找内容。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="bread">
									<li><a href="#" class="icon-home">首页</a> </li>
									<li><a href="#">新闻中心</a> </li>
									<li><a href="#">公司新闻</a> </li>
									<li>正文</li>
								</ul>
								<ul class="bread bg">
									<li><a href="#" class="icon-home">首页</a> </li>
									<li><a href="#">新闻中心</a> </li>
									<li><a href="#">公司新闻</a> </li>
									<li>正文</li>
								</ul>
								<ul class="bread bg-green bg-inverse">
									<li><a href="#" class="icon-home">首页</a> </li>
									<li><a href="#">新闻中心</a> </li>
									<li>公司新闻</li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="bread">
    <li><a href="#" class="icon-home">首页</a> </li>
    <li><a href="#">新闻中心</a> </li>
    <li><a href="#">公司新闻</a> </li>
    <li>正文</li>
</ul>
<ul class="bread bg">
    ...</ul>
<ul class="bread bg-green bg-inverse">
    ...</ul>
</xmp>
						</div>
						<h3 class="doc-h3" id="bread-step">
                        步骤指导
                    </h3>
						<p class="doc-readme">
							按完成的步骤顺序引导。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="step">
									<div class="step-bar complete" style="width: 25%;">
										<span class="step-point icon-check"></span><span class="step-text">第一步</span></span>
									</div>
									<div class="step-bar active" style="width: 25%;">
										<span class="step-point">2</span><span class="step-text">第二步</span>
									</div>
									<div class="step-bar" style="width: 25%;">
										<span class="step-point">3</span><span class="step-text">第三步</span>
									</div>
									<div class="step-bar" style="width: 25%;">
										<span class="step-point">4</span><span class="step-text">第四步</span>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="step">
    <div class="step-bar complete" style="width: 25%;">
        <span class="step-point icon-check"></span><span class="step-text">第一步</span></span>
    </div>
    <div class="step-bar active" style="width: 25%;">
        <span class="step-point">2</span><span class="step-text">第二步</span>
    </div>
    <div class="step-bar" style="width: 25%;">
        <span class="step-point">3</span><span class="step-text">第三步</span>
    </div>
    <div class="step-bar" style="width: 25%;">
        <span class="step-point">4</span><span class="step-text">第四步</span>
    </div>
</div>
</xmp>
						</div>
						<blockquote class="quote border-green doc-quote">
							<strong>改变颜色</strong> 给.step-bar或.step-point样式添加.bg-(*)样式，可以改变对应的背景色。</blockquote>
						<br />
						<br />
						<h2 class="doc-h2" id="list">
                        列表
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="list-text">
                        文本列表
                    </h3>
						<p class="doc-readme">
							常用于新闻、文章等的文本列表方式展示，给ul元素加上.list-text样式，如需分隔，给li元素添加.divider样式，日期在li里加上span元素，添加.date样式；很方便实现文本的列表样式。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="list-text">
									<li><span class="date">2015-1-1</span><a href="#">拼图是一款开源的专业网页前端UI解决方案</a> </li>
									<li><a href="#">由HTML、CSS、Javascrip三者结合的前端框架</a> </li>
									<li><a href="#">它配合js效果，提供了拼图的CSS、HTML标准</a> </li>
									<li><a href="#">方便个性化、人性化的前端设计方法</a> </li>
									<li><a href="#">受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱</a> </li>
									<li class="divider"></li>
									<li><a href="#">拼图框架提供了CSS的重定义、元件样式的预设、样式组件</a> </li>
									<li><a href="#">风格模块及Javascript效果，丰富了页面效果</a> </li>
									<li><a href="#">同时让前端设计简单化、傻瓜化</a> </li>
									<li><a href="#">任何初学者都可快速建设美观、简洁的页面</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="list-text">
    <li><span class="date">...</span>...</li>
    <li>...</li>
    <li class="divider"></li>
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        加下划线的列表
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="list-text list-underline list-striped">
									<li><span class="date">2015-1-1</span><a href="#">拼图是一款开源的专业网页前端UI解决方案</a> </li>
									<li><a href="#">由HTML、CSS、Javascrip三者结合的前端框架</a> </li>
									<li><a href="#">它配合js效果，提供了拼图的CSS、HTML标准</a> </li>
									<li><a href="#">方便个性化、人性化的前端设计方法</a> </li>
									<li><a href="#">受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱</a> </li>
									<li><a href="#">拼图框架提供了CSS的重定义、元件样式的预设、样式组件</a> </li>
									<li><a href="#">风格模块及Javascript效果，丰富了页面效果</a> </li>
									<li><a href="#">同时让前端设计简单化、傻瓜化</a> </li>
									<li><a href="#">任何初学者都可快速建设美观、简洁的页面</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="list-text list-underline list-striped">
    <li><span class="date">...</span>...</li>
    <li>...</li>
</ul>
</xmp>
						</div>
						<blockquote class="quote border-green doc-quote">
							<strong>条纹效果</strong> 加上.list-striped样式，可以使列表具有条纹效果。</blockquote>
						<h3 class="doc-h3" id="list-box">
                        文本块
                    </h3>
						<p class="doc-readme">
							块状文本效果，配合网格系统使用。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line-small list-box">
									<div class="xl6 xs4 xm3 xb2">
										<a href="#">拼图是一款开源的专业网页前端UI解决方案</a>
									</div>
									<div class="xl6 xs4 xm3 xb2">
										<a href="#">由HTML、CSS、Javascrip三者结合的前端框架</a>
									</div>
									<div class="xl6 xs4 xm3 xb2">
										<a href="#">它配合js效果，提供了拼图的CSS、HTML标准</a>
									</div>
									<div class="xl6 xs4 xm3 xb2">
										<a href="#">方便个性化、人性化的前端设计方法</a>
									</div>
									<div class="xl6 xs4 xm3 xb2">
										<a href="#">受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱</a>
									</div>
									<div class="xl6 xs4 xm3 xb2">
										<a href="#">拼图框架提供了CSS的重定义、元件样式的预设、样式组件</a>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="line-small list-box">
    <div class="xl6 xs4 xm3 xb2">
        <a href="#">拼图是一款开源的专业网页前端UI解决方案</a>
    </div>
    <div class="xl6 xs4 xm3 xb2">
        <a href="#">由HTML、CSS、Javascrip三者结合的前端框架</a>
    </div>
    <div class="xl6 xs4 xm3 xb2">
        <a href="#">它配合js效果，提供了拼图的CSS、HTML标准</a>
    </div>
    <div class="xl6 xs4 xm3 xb2">
        <a href="#">方便个性化、人性化的前端设计方法</a>
    </div>
    <div class="xl6 xs4 xm3 xb2">
        <a href="#">受到设计师、前端工程师、程序员及网页设计初学者的特别喜爱</a>
    </div>
    <div class="xl6 xs4 xm3 xb2">
        <a href="#">拼图框架提供了CSS的重定义、元件样式的预设、样式组件</a>
    </div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="list-media">
                        媒体列表
                    </h3>
						<p class="doc-readme">
							结合媒体结信息元件，组成媒体列表。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="list-media">
									<li>
										<div class="media media-x">
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												<strong>媒体标题</strong> 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<strong>媒体标题</strong>
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												<strong>媒体标题</strong> 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<strong>媒体标题</strong>
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												<strong>媒体标题</strong> 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<strong>媒体标题</strong>
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="list-media">
    <li>
        <div class="media media-x">
            ...</div>
    </li>
    ...
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        使用下划线分隔
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="list-media list-underline">
									<li>
										<div class="media media-x">
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												<strong>媒体标题</strong> 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<strong>媒体标题</strong>
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												<strong>媒体标题</strong> 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<strong>媒体标题</strong>
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												<strong>媒体标题</strong> 拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。</div>
										</div>
									</li>
									<li>
										<div class="media media-x">
											<strong>媒体标题</strong>
											<a class="float-left" href="#">
												<img src="images/64.png" class="radius" alt="...">
											</a>
											<div class="media-body">
												拼图，是国内一款开源的专业响应式网页前端框架，由HTML、CSS、Javascrip三者组合应用。提供的CSS、元件、动画、组件、模块等样式实现绝大多数的网页特效与响应功能，像玩积木、拼图游戏一样快速简单而富有乐趣的做前端开发。让前端设计简单化、傻瓜化，任何初学者都可快速建设美观、简洁的页面。</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="list-media list-underline">
    <li>
        <div class="media media-x">
            ...</div>
    </li>
    ...
</ul>
</xmp>
						</div>
						<h3 class="doc-h3" id="list-midea-box">
                        媒体块
                    </h3>
						<p class="doc-readme">
							媒体块</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="line-middle">
									<div class="xl12 xs6 xm4 xb3">
										<div class="media padding-bottom clearfix">
											<a href="#">
												<img src="images/300x200.png" class="radius img-responsive" alt="...">
											</a>
											<div class="media-body">
												<strong>拼图框架</strong> 拼图跨屏响应式前端框架</div>
										</div>
									</div>
									<div class="xl12 xs6 xm4 xb3">
										<div class="media padding-bottom clearfix">
											<a href="#">
												<img src="images/300x200.png" class="radius img-responsive" alt="...">
											</a>
											<div class="media-body">
												<strong>拼图框架</strong> 拼图跨屏响应式前端框架</div>
										</div>
									</div>
									<div class="xl12 xs6 xm4 xb3">
										<div class="media padding-bottom clearfix">
											<a href="#">
												<img src="images/300x200.png" class="radius img-responsive" alt="...">
											</a>
											<div class="media-body">
												<strong>拼图框架</strong> 拼图跨屏响应式前端框架</div>
										</div>
									</div>
									<div class="xl12 xs6 xm4 xb3">
										<div class="media padding-bottom clearfix">
											<a href="#">
												<img src="images/300x200.png" class="radius img-responsive" alt="...">
											</a>
											<div class="media-body">
												<strong>拼图框架</strong> 拼图跨屏响应式前端框架</div>
										</div>
									</div>
									<div class="xl12 xs6 xm4 xb3">
										<div class="media padding-bottom clearfix">
											<a href="#">
												<img src="images/300x200.png" class="radius img-responsive" alt="...">
											</a>
											<div class="media-body">
												<strong>拼图框架</strong> 拼图跨屏响应式前端框架</div>
										</div>
									</div>
									<div class="xl12 xs6 xm4 xb3">
										<div class="media padding-bottom clearfix">
											<a href="#">
												<img src="images/300x200.png" class="radius img-responsive" alt="...">
											</a>
											<div class="media-body">
												<strong>拼图框架</strong> 拼图跨屏响应式前端框架</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="line-middle">
    <div class="xl12 xs6 xm4 xb3">
        <div class="media padding-bottom clearfix">
            <a href="#">
                <img src="..." class="radius img-responsive" alt="...">
            </a>
            <div class="media-body">
                <strong>...</strong> ...
            </div>
        </div>
    </div>
    ...
</div>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="pagination">
                        分页
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="page-demo">
                        基本样式
                    </h3>
						<p class="doc-readme">
							用于内容分页效果。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pagination">
									<li><a href="#">«</a> </li>
									<li><a href="#">1</a> </li>
									<li><a href="#">2</a> </li>
									<li><a href="#">3</a> </li>
									<li><a href="#">4</a> </li>
									<li><a href="#">5</a> </li>
									<li><a href="#">»</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pagination">
    <li><a href="#">«</a> </li>
    <li><a href="#">1</a> </li>
    <li><a href="#">2</a> </li>
    <li><a href="#">3</a> </li>
    <li><a href="#">4</a> </li>
    <li><a href="#">5</a> </li>
    <li><a href="#">»</a> </li>
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        组合状态
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pagination pagination-group">
									<li><a href="#">«</a> </li>
									<li><a href="#">1</a> </li>
									<li><a href="#">2</a> </li>
									<li><a href="#">3</a> </li>
									<li><a href="#">4</a> </li>
									<li><a href="#">5</a> </li>
									<li><a href="#">»</a> </li>
								</ul>
								<br />
								<br />
								<ul class="pagination pagination-group">
									<li><a href="#">上一页</a> </li>
									<li><a href="#">下一页</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pagination pagination-group">
    <li><a href="#">«</a> </li>
    <li><a href="#">1</a> </li>
    <li><a href="#">2</a> </li>
    <li><a href="#">3</a> </li>
    <li><a href="#">4</a> </li>
    <li><a href="#">5</a> </li>
    <li><a href="#">»</a> </li>
</ul>
<ul class="pagination pagination-group">
    <li><a href="#">上一页</a> </li>
    <li><a href="#">下一页</a> </li>
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        禁用及激活状态
                    </h4>
						<div class="doc-input">
							可以添加.disabled及.active样式，使得链接在禁用或激活状态。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pagination pagination-group">
									<li class="disabled"><a href="#">«</a> </li>
									<li><a href="#">1</a> </li>
									<li class="active"><a href="#">2</a> </li>
									<li><a href="#">3</a> </li>
									<li><a href="#">4</a> </li>
									<li><a href="#">5</a> </li>
									<li><a href="#">»</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pagination pagination-group">
    <li class="disabled"><a href="#">«</a> </li>
    <li><a href="#">1</a> </li>
    <li class="active"><a href="#">2</a> </li>
    <li><a href="#">3</a> </li>
    <li><a href="#">4</a> </li>
    <li><a href="#">5</a> </li>
    <li><a href="#">»</a> </li>
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        组合示例
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pagination">
									<li><a href="#">上一页</a> </li>
								</ul>
								<ul class="pagination pagination-group">
									<li><a href="#">1</a> </li>
									<li><a href="#">2</a> </li>
									<li><a href="#">3</a> </li>
									<li><a href="#">4</a> </li>
									<li><a href="#">5</a> </li>
								</ul>
								<ul class="pagination">
									<li><a href="#">下一页</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pagination">
    <li><a href="#">上一页</a> </li>
</ul>
<ul class="pagination pagination-group">
    <li><a href="#">1</a> </li>
    <li><a href="#">2</a> </li>
    <li><a href="#">3</a> </li>
    <li><a href="#">4</a> </li>
    <li><a href="#">5</a> </li>
</ul>
<ul class="pagination">
    <li><a href="#">下一页</a> </li>
</ul>
</xmp>
						</div>
						<h3 class="doc-h3" id="pagination-size">
                        尺寸及颜色
                    </h3>
						<p class="doc-readme">
							添加.pagination-big，.pagination-small改变样式的大小。</p>
						<h4 class="doc-title">
                        大尺寸
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pagination pagination-big">
									<li class="disabled"><a href="#">«</a> </li>
									<li><a href="#">1</a> </li>
									<li class="active"><a href="#">2</a> </li>
									<li><a href="#">3</a> </li>
									<li><a href="#">4</a> </li>
									<li><a href="#">5</a> </li>
									<li><a href="#">»</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pagination pagination-big">
    ...</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        小号分页
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pagination pagination-group pagination-small">
									<li class="disabled"><a href="#">«</a> </li>
									<li><a href="#">1</a> </li>
									<li class="active"><a href="#">2</a> </li>
									<li><a href="#">3</a> </li>
									<li><a href="#">4</a> </li>
									<li><a href="#">5</a> </li>
									<li><a href="#">»</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pagination pagination-group pagination-small">
    ...</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        颜色
                    </h4>
						<div class="doc-input">
							使用.border-(*)系列类，可以改变分布边框色。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pagination border-main">
									<li class="disabled"><a href="#">«</a> </li>
									<li><a href="#">1</a> </li>
									<li class="active"><a href="#">2</a> </li>
									<li><a href="#">3</a> </li>
									<li><a href="#">4</a> </li>
									<li><a href="#">5</a> </li>
									<li><a href="#">»</a> </li>
								</ul>
								<br />
								<br />
								<ul class="pagination pagination-group border-sub">
									<li class="disabled"><a href="#">«</a> </li>
									<li><a href="#">1</a> </li>
									<li class="active"><a href="#">2</a> </li>
									<li><a href="#">3</a> </li>
									<li><a href="#">4</a> </li>
									<li><a href="#">5</a> </li>
									<li><a href="#">»</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pagination border-main">
    <li class="disabled"><a href="#">«</a> </li>
    <li><a href="#">1</a> </li>
    <li class="active"><a href="#">2</a> </li>
    <li><a href="#">3</a> </li>
    <li><a href="#">4</a> </li>
    <li><a href="#">5</a> </li>
    <li><a href="#">»</a> </li>
</ul>
<ul class="pagination pagination-group border-sub">
    <li class="disabled"><a href="#">«</a> </li>
    <li><a href="#">1</a> </li>
    <li class="active"><a href="#">2</a> </li>
    <li><a href="#">3</a> </li>
    <li><a href="#">4</a> </li>
    <li><a href="#">5</a> </li>
    <li><a href="#">»</a> </li>
</ul>
</xmp>
						</div>
						<h3 class="doc-h3" id="pager">
                        翻页
                    </h3>
						<p class="doc-readme">
							用于简单的分页效果。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pager">
									<li><a href="#">上一页</a> </li>
									<li><a href="#">下一页</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pager">
    <li><a href="#">上一页</a> </li>
    <li><a href="#">下一页</a> </li>
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        放在左右两侧
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pager clearfix">
									<li class="float-left"><a href="#">上一页</a> </li>
									<li class="float-right"><a href="#">下一页</a> </li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pager clearfix">
    <li class="float-left"><a href="#">上一页</a> </li>
    <li class="float-right"><a href="#">下一页</a> </li>
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        使用图标
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<a class="pager-prev icon-angle-left" href="#"></a>
								<a class="pager-next icon-angle-right" href="#"></a>
								<br />
								<br />
								<ul class="pager">
									<li>
										<a class="pager-prev icon-angle-left" href="#"></a>
									</li>
									<li>
										<a class="pager-next icon-angle-right" href="#"></a>
									</li>
								</ul>
								<br />
								<br />
								<ul class="pager clearfix">
									<li class="float-left">
										<a class="pager-prev icon-angle-left" href="#"></a>
									</li>
									<li class="float-right">
										<a class="pager-next icon-angle-right" href="#"></a>
									</li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<a class="pager-prev icon-angle-left" href="#"></a>
<a class="pager-next icon-angle-right" href="#"></a>
<ul class="pager">
    <li><a class="pager-prev icon-angle-left" href="#"></a></li>
    <li><a class="pager-next icon-angle-right" href="#"></a></li>
</ul>
<ul class="pager clearfix">
    <li class="float-left"><a class="pager-prev icon-angle-left" href="#"></a></li>
    <li class="float-right"><a class="pager-next icon-angle-right" href="#"></a></li>
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        颜色
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pager border-red">
									<li><a href="#">上一页</a> </li>
									<li><a href="#">下一页</a> </li>
								</ul>
								<br />
								<br />
								<a class="pager-prev icon-angle-left border-blue" href="#"></a>
								<a class="pager-next icon-angle-right border-blue" href="#"></a>
								<br />
								<br />
								<ul class="pager border-green clearfix">
									<li class="float-left">
										<a class="pager-prev icon-angle-left" href="#"></a>
									</li>
									<li class="float-right">
										<a class="pager-next icon-angle-right" href="#"></a>
									</li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pager border-red">
    <li><a href="#">上一页</a> </li>
    <li><a href="#">下一页</a> </li>
</ul>
<a class="pager-prev icon-angle-left border-blue" href="#"></a>
<a class="pager-next icon-angle-right border-blue" href="#"></a>
<ul class="pager border-green clearfix">
    <li class="float-left"><a class="pager-prev icon-angle-left" href="#"></a></li>
    <li class="float-right"><a class="pager-next icon-angle-right" href="#"></a></li>
</ul>
</xmp>
						</div>
						<h3 class="doc-h3" id="pointer">
                        点式分页
                    </h3>
						<p class="doc-readme">
							常用于幻灯片或图片、横幅等切换指示效果。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pointer">
									<li href="#"></li>
									<li href="#"></li>
									<li class="active"></li>
									<li href="#"></li>
									<li href="#"></li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pointer">
    <li href="#"></li>
    <li href="#"></li>
    <li class="active"></li>
    <li href="#"></li>
    <li href="#"></li>
</ul>
</xmp>
						</div>
						<h4 class="doc-title">
                        给点颜色看看
                    </h4>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<ul class="pointer border-main">
									<li href="#"></li>
									<li href="#"></li>
									<li class="active"></li>
									<li href="#"></li>
									<li href="#"></li>
								</ul>
								<br />
								<ul class="pointer border-yellow">
									<li href="#"></li>
									<li href="#"></li>
									<li class="active"></li>
									<li href="#"></li>
									<li href="#"></li>
								</ul>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<ul class="pointer border-main">
    ...</ul>
<ul class="pointer border-yellow">
    ...</ul>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="form">
                        表单
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="form-base">
                        常规表单
                    </h3>
						<p class="doc-readme">
						常规表单提供了用户经常使用的表单，例如：登录、注册、找回密码等等...
						</p>
					<h4 class="doc-title">
                        常规登录/登陆
                    </h4>
						<div class="doc-input">
							登录/登陆表单是必不可少的常规表单，拼图提供的是常规登录表单，若有特殊定制表单，建议复制代码后自己改造。推荐：<a class="tag bg-blue text-white" target="_blank" href="tools/form.html">表单快速生成工具</a></div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<style type="text/css">
									.passcode {
									    position: absolute;
									    right: 0;
									    top: 0;
									    height: 32px;
									    margin: 1px;
									    border-left: solid 1px #ddd;
									    text-align: center;
									    line-height: 32px;
									    border-radius: 0 4px 4px 0;
									}
								</style>
								<div align="center">
									<form action="#index.html" method="post">
										<div class="panel padding" style="width: 450px;text-align: left;">
											<div class="text-center">
												<br>
												<h2><strong>欢迎使用&nbsp;拼图</strong></h2></div>
											<div class="" style="padding:30px;">
												<div class="form-group">
													<div class="field field-icon-right">
														<input type="text" class="input" name="admin" placeholder="登录账号" data-validate="required:请填写账号,length#>=5:账号长度不符合要求" />
														<span class="icon icon-user"></span>
													</div>
												</div>
												<div class="form-group">
													<div class="field field-icon-right">
														<input type="password" class="input" name="password" placeholder="登录密码" data-validate="required:请填写密码,length#>=8:密码长度不符合要求" />
														<span class="icon icon-key"></span>
													</div>
												</div>
												<div class="form-group">
													<div class="field">
														<input type="text" class="input" name="passcode" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
														<img src="demo/pintuer2/images/passcode.jpg" width="80" height="32" class="passcode" />
													</div>
												</div>
												<div class="form-group">
													<div class="field">
														<button class="button button-block bg-main text-big">立即登录</button>
													</div>
												</div>
												<div class="form-group">
													<div class="field text-center">
														<p class="text-muted text-center"> <a class="" href="#login.html"><small>忘记密码了？</small></a> | <a class="" href="#register.html">注册新账号</a>
														</p>
													</div>
												</div>
												<div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<style type="text/css">
/*特别说明，验证码样式不包含在拼图pintuer.css文件内，需要自己添加到自己的style.css文件中，若要使用登录模块，需复制.passcode样式。*/
.passcode {
    position: absolute;
    right: 0;
    top: 0;
    height: 32px;
    margin: 1px;
    border-left: solid 1px #ddd;
    text-align: center;
    line-height: 32px;
    border-radius: 0 4px 4px 0;
}
</style>
<div align="center">
	<form action="#index.html" method="post">
		<div class="panel padding" style="width: 450px;text-align: left;">
			<div class="text-center">
				<br>
				<h2><strong>欢迎使用&nbsp;拼图</strong></h2></div>
			<div class="" style="padding:30px;">
				<div class="form-group">
					<div class="field field-icon-right">
						<input type="text" class="input" name="admin" placeholder="登录账号" data-validate="required:请填写账号,length#>=5:账号长度不符合要求" />
						<span class="icon icon-user"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="field field-icon-right">
						<input type="password" class="input" name="password" placeholder="登录密码" data-validate="required:请填写密码,length#>=8:密码长度不符合要求" />
						<span class="icon icon-key"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="field">
						<input type="text" class="input" name="passcode" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
						<img src="demo/pintuer2/images/passcode.jpg" width="80" height="32" class="passcode" />
					</div>
				</div>
				<div class="form-group">
					<div class="field">
						<button class="button button-block bg-main text-big">立即登录</button>
					</div>
				</div>
				<div class="form-group">
					<div class="field text-center">
						<p class="text-muted text-center"> <a class="" href="#login.html"><small>忘记密码了？</small></a> | <a class="" href="#register.html">注册新账号</a>
						</p>
					</div>
				</div>
				<div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div>
			</div>
		</div>
	</form>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        注册
                    </h4>
						<div class="doc-input">
							注册表单是必不可少的常规表单，拼图提供的是常规注册表单，若有特殊定制表单，建议复制代码后自己改造。推荐：<a class="tag bg-blue text-white" target="_blank" href="tools/form.html">表单快速生成工具</a></div>
						<div class="doc-demoview doc-viewad0">
							<div align="center">
								<form action="#index.html" method="post">
									<div class="panel padding" style="width: 450px;text-align: left;">
										<div class="text-center">
											<br>
											<h2><strong>欢迎使用&nbsp;拼图</strong></h2></div>
										<div class="" style="padding:30px;">
											<div class="form-group">
												<div class="field field-icon-right">
													<input type="text" class="input" name="admin" placeholder="手机号码"maxlength="11" data-validate="required:请填写手机号码,mobile:请填写正确的手机号码" />
													<span class="icon icon-mobile"></span>
												</div>
											</div>
											<div class="form-group">
												<div class="field field-icon-right">
													<input type="password" class="input" name="password" maxlength="32" placeholder="登录密码" data-validate="required:请填写密码,length#>=8:密码长度不符合要求" />
													<span class="icon icon-key"></span>
												</div>
											</div>
											<div class="form-group">
												<div class="field">
													<div class="input-group padding-little-top">
														<input type="text" class="input" name="passcode" maxlength="6" placeholder="短信验证码" data-validate="required:请填写手机收到的短信验证码" />
														<span class="addbtn">
										                    <button type="button" class="button">
										                        130秒后重新发送</button>
										                </span>
													</div>
												</div>
											</div>
											<div class="form-group">
												<div class="field">
													<button class="button button-block bg-main text-big">立即注册</button>
												</div>
											</div>
											<div class="form-group">
												<div class="field text-center">
													<p class="text-muted text-center"> <a class="" href="#find.html"><small>忘记密码了？</small></a> | <a class="" href="#login.html">已有帐号，去登录</a>
													</p>
												</div>
											</div>
											<div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div align="center">
	<form action="#index.html" method="post">
		<div class="panel padding" style="width: 450px;text-align: left;">
			<div class="text-center">
				<br>
				<h2><strong>欢迎使用&nbsp;拼图</strong></h2></div>
			<div class="" style="padding:30px;">
				<div class="form-group">
					<div class="field field-icon-right">
						<input type="text" class="input" name="admin" placeholder="手机号码"maxlength="11" data-validate="required:请填写手机号码,mobile:请填写正确的手机号码" />
						<span class="icon icon-mobile"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="field field-icon-right">
						<input type="password" class="input" name="password" maxlength="32" placeholder="登录密码" data-validate="required:请填写密码,length#>=8:密码长度不符合要求" />
						<span class="icon icon-key"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="field">
						<div class="input-group padding-little-top">
							<input type="text" class="input" name="passcode" maxlength="6" placeholder="短信验证码" data-validate="required:请填写手机收到的短信验证码" />
							<span class="addbtn">
			                    <button type="button" class="button">
			                        130秒后重新发送</button>
			                </span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="field">
						<button class="button button-block bg-main text-big">立即注册</button>
					</div>
				</div>
				<div class="form-group">
					<div class="field text-center">
						<p class="text-muted text-center"> <a class="" href="#find.html"><small>忘记密码了？</small></a> | <a class="" href="#login.html">已有帐号，去登录</a>
						</p>
					</div>
				</div>
				<div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div>
			</div>
		</div>
	</form>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
	                        	找回密码
	                    </h4>
						<div class="doc-input">
							找回密码表单是日常用户流程中必不可少的常规表单，拼图提供的是基于手机号找回密码方式的表单，如果需要电子邮件形式的，可自行更改文本框类型，若有特殊定制表单，建议复制代码后自己改造。推荐：<a class="tag bg-blue text-white" target="_blank" href="tools/form.html">表单快速生成工具</a></div>
						<div class="doc-demoview doc-viewad0">
							<div align="center">
								<form action="#index.html" method="post">
									<div class="panel padding" style="width: 450px;text-align: left;">
										<div class="alert alert-yellow">
											您可以通过您的手机号码和收到的短信验证码来重置您的密码！
										</div>
										<div class="" style="padding:30px;">
											<div class="form-group">
												<div class="field field-icon-right">
													<input type="text" class="input" name="admin" placeholder="手机号码" maxlength="11" data-validate="required:请填写手机号码,mobile:请填写正确的手机号码" />
													<span class="icon icon-mobile"></span>
												</div>
											</div>
											<div class="form-group">
												<div class="field">
													<div class="input-group padding-little-top">
														<input type="text" class="input" name="passcode" maxlength="6" placeholder="短信验证码" data-validate="required:请填写手机收到的短信验证码" />
														<span class="addbtn">
										                    <button type="button" class="button">
										                        130秒后重新发送</button>
										                </span>
													</div>
												</div>
											</div>
											<div class="form-group">
												<div class="field">
													<button class="button button-block bg-main text-big">立即找回</button>
												</div>
											</div>
											<div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div align="center">
	<form action="#index.html" method="post">
		<div class="panel padding" style="width: 450px;text-align: left;">
			<div class="alert alert-yellow">
				您可以通过您的手机号码和收到的短信验证码来重置您的密码！
			</div>
			<div class="" style="padding:30px;">
				<div class="form-group">
					<div class="field field-icon-right">
						<input type="text" class="input" name="admin" placeholder="手机号码" maxlength="11" data-validate="required:请填写手机号码,mobile:请填写正确的手机号码" />
						<span class="icon icon-mobile"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="field">
						<div class="input-group padding-little-top">
							<input type="text" class="input" name="passcode" maxlength="6" placeholder="短信验证码" data-validate="required:请填写手机收到的短信验证码" />
							<span class="addbtn">
			                    <button type="button" class="button">
			                        130秒后重新发送</button>
			                </span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="field">
						<button class="button button-block bg-main text-big">立即找回</button>
					</div>
				</div>
				<div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div>
			</div>
		</div>
	</form>
</div>
</xmp>
						</div>
					<h4 class="doc-title">
                        重置密码
                    </h4>
						<div class="doc-input">
							重置密码表单是日常用户流程中必不可少的常规表单。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div align="center">
								<form action="#default.html" method="post">
									<div class="panel padding" style="width: 450px;text-align: left;">
										<div class="" style="padding:30px;">
											<div class="form-group">
												<div class="field field-icon-right">
													<input type="password" class="input" name="password" placeholder="新密码" maxlength="32" data-validate="required:请填写新密码,length#>=8:密码长度不符合要求" />
													<span class="icon icon-key"></span>
												</div>
											</div>
											<div class="form-group">
												<div class="field field-icon-right">
													<input type="password" class="input" name="password" placeholder="确认密码" maxlength="32" data-validate="required:请填写确认新密码,length#>=8:密码长度不符合要求" />
													<span class="icon icon-key"></span>
												</div>
											</div>
											<div class="form-group">
												<div class="field">
													<button class="button button-block bg-main text-big">立即重置</button>
												</div>
											</div>
											<div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div align="center">
	<form action="#default.html" method="post">
		<div class="panel padding" style="width: 450px;text-align: left;">
			<div class="" style="padding:30px;">
				<div class="form-group">
					<div class="field field-icon-right">
						<input type="password" class="input" name="password" placeholder="新密码" maxlength="32" data-validate="required:请填写新密码,length#>=8:密码长度不符合要求" />
						<span class="icon icon-key"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="field field-icon-right">
						<input type="password" class="input" name="password" placeholder="确认密码" maxlength="32" data-validate="required:请填写确认新密码,length#>=8:密码长度不符合要求" />
						<span class="icon icon-key"></span>
					</div>
				</div>
				<div class="form-group">
					<div class="field">
						<button class="button button-block bg-main text-big">立即重置</button>
					</div>
				</div>
				<div class="text-right text-small text-gray padding-top"><a class="text-gray" target="_blank" href="http://www.pintuer.com">拼图</a> 版权所有</div>
			</div>
		</div>
	</form>
</div>
</xmp>
						</div>
																		<h4 class="doc-title">
                        整理添加中...
                    </h4>
						<div class="doc-input">
							大火兔正在整理添加中。</div>
						<div class="doc-demoview doc-viewad0 ">

						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>

</xmp>
						</div>
						<h3 class="doc-h3" id="form-other">
                        特殊表单
                    </h3>
						<p class="doc-readme">
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">

							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>

</xmp>
						</div>
						<h3 class="doc-h3" id="form-editer">
                        编辑器
                    </h3>
						<p class="doc-readme">
						</p>
						<h4 class="doc-title">
                        评论框
                    </h4>
						<div class="doc-input">
							评论框算是一种最简洁的文本框编辑器，功能简单只需要统计字数，如微博评论等功能会常用。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">

							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>

</xmp>
						</div>
						<h4 class="doc-title">
                        代码编辑器
                    </h4>
						<div class="doc-input">
						特殊的文本框编辑器，是针对编程人员的一种文本框编辑器。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">

							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>

</xmp>
						</div>
					<h4 class="doc-title">
                        通用富文本编辑器
                    </h4>
						<div class="doc-input">
						常用的一种富文本编辑器。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">

							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>

</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="content">
                        内容
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="content-key">
                        大屏介绍
                    </h3>
						<p class="doc-readme">
							大屏介绍关键内容。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="keypoint bg">
									<h1>
                                    你好，拼图!
                                </h1>
									<p>
										国内优秀的HTML、CSS、JS跨屏响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、快速、便捷。</p>
									<p>
										<button class="button bg-main">
											详细介绍</button>
									</p>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="keypoint bg">
    <h1>
        你好，拼图!</h1>
    <p>
        国内优秀的HTML、CSS、JS跨屏响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、快速、便捷。</p>
    <p>
        <button class="button bg-main">
            详细介绍</button>
    </p>
</div>
</xmp>
						</div>
						<h4 class="doc-title">
                        添加效果
                    </h4>
						<div class="doc-input">
							如居中，背景，圆角等效果。</div>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="keypoint bg-blue bg-inverse radius text-center">
									<h1>
                                    你好，拼图!
                                </h1>
									<p>
										国内优秀的HTML、CSS、JS跨屏响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、快速、便捷。</p>
									<p>
										<button class="button bg-white">
											详细介绍</button>
									</p>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="keypoint bg-blue bg-inverse radius text-center">
    ...</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="detail">
                        内容详情
                    </h3>
						<p class="doc-readme">
						</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="detail">
									<h1>
                                    拼图 Pintuer-国产跨屏响应式前端框架
                                </h1>
									<p class="text-center">
										时间：2015-1-1 作者：拼图 来源：拼图</p>
									<p>
										国内优秀的HTML、CSS、JS跨屏响应式前端框架，自动适应电脑、平板、手机等设备，让前端开发更简单、快速、便捷。改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。</p>
									<p align="center">
										<img class="img-responsive" src="images/300x200.png" />
									</p>
									<p>
										拼图 Pintuer：国内优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，为快速的前端开发提供一系列的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包，占用资源小，使用拼图可以快速构建简洁、优雅而且自动适应手机、平板、桌面电脑等设备的前端界面，让前端开发像玩游戏一样快乐而轻松。</p>
									<p>
										拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，改变以往建立PC网站同时，再建立手机网站的局面，实现一站响应所有设备，大大提高了开发效率。</p>
									<p>
										<strong>功能特色：</strong>
									</p>
									<p>
										移动优先、跨屏响应：拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面浏览器的同时，更适应了移动互联网的潮流。</p>
									<p>
										组件丰富、海量插件：拼图前端框架重新定义了CSS基础、常用元件及JS组件，可快速构架前端界面，实现跨屏响应。同时兼容所有jQuery插件，在项目中可以灵活使用，让前端开发如虎添翼。</p>
									<p>
										轻量高效、国产开源：拼图基于应用广泛jQuery插件，轻量高效；相对于国外的前端框架，拼图前端框架侧重于对中文的支持，符合国人的视觉及体验，实现到国内主流浏览器的支持，减少兼容性测试时间，提高开发效率。</p>
								</div>
								<div class="text-center">
									<ul class="pagination pagination-group">
										<li><a href="#">«</a> </li>
										<li><a href="#">1</a> </li>
										<li><a href="#">2</a> </li>
										<li><a href="#">3</a> </li>
										<li><a href="#">4</a> </li>
										<li><a href="#">5</a> </li>
										<li><a href="#">»</a> </li>
									</ul>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="detail">
    ...</div>
</xmp>
						</div>
						<br />
						<br />
						<h2 class="doc-h2" id="footer">
                        底部
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="footer-demo">
                        基本样式
                    </h3>
						<p class="doc-readme">
							网站底部版权信息及联系信息等内容。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container-layout">
									<div class="border-top padding-top">
										<div class="text-center">
											<ul class="nav nav-inline">
												<li class="active"><a href="#">网站首页</a> </li>
												<li><a href="#">新闻资讯</a> </li>
												<li><a href="#">产品中心</a> </li>
												<li><a href="#">技术反馈</a> </li>
												<li><a href="#">留言反馈</a> </li>
												<li><a href="#">联系方式</a> </li>
											</ul>
										</div>
										<div class="text-center height-big">
											版权所有 © Pintuer.com All Rights Reserved，图ICP备：380959609</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container-layout">
    <div class="border-top padding-top">
        <div class="text-center">
            <ul class="nav nav-inline">
                <li class="active"><a href="#">网站首页</a> </li>
                <li><a href="#">新闻资讯</a> </li>
                <li><a href="#">产品中心</a> </li>
                <li><a href="#">技术反馈</a> </li>
                <li><a href="#">留言反馈</a> </li>
                <li><a href="#">联系方式</a> </li>
            </ul>
        </div>
        <div class="text-center height-big">
            版权所有 © Pintuer.com All Rights Reserved，图ICP备：380959609</div>
    </div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="footer-navbar">
                        带导航条的底部
                    </h3>
						<p class="doc-readme">
							底部也经常会放置导航条。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container-layout">
									<div class="navbar  bg-main bg-inverse radius clearfix">
										<div class="navbar-head">
											<button class="button bg-white icon-navicon" data-target="#navbar-foot1">
											</button>
											<a href="#">
												<img class="logo" src="images/24-white.png" />
											</a>
										</div>
										<div class="navbar-body nav-navicon" id="navbar-foot1">
											<ul class="nav nav-inline nav-split">
												<li><a href="#">新闻资讯</a> </li>
												<li><a href="#">产品中心</a> </li>
												<li><a href="#">技术反馈</a> </li>
												<li><a href="#">留言反馈</a> </li>
												<li><a href="#">联系方式</a> </li>
											</ul>
											<p class="navbar-right navbar-text hidden-s">
												热线：400-123-4567</p>
										</div>
									</div>
									<br />
									<div class="text-center">
										版权所有 © Pintuer.com All Rights Reserved，图ICP备：380959609</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container">
    <div class="navbar  bg-main bg-inverse radius clearfix">
        <div class="navbar-head">
            <button class="button bg-white icon-navicon" data-target="#navbar-foot1">
            </button>
            <a href="#">
                <img class="logo" src="images/24-white.png" />
            </a>
        </div>
        <div class="navbar-body nav-navicon" id="navbar-foot1">
            <ul class="nav nav-inline nav-split">
                <li><a href="#">新闻资讯</a> </li>
                <li><a href="#">产品中心</a> </li>
                <li><a href="#">技术反馈</a> </li>
                <li><a href="#">留言反馈</a> </li>
                <li><a href="#">联系方式</a> </li>
            </ul>
            <p class="navbar-right navbar-text hidden-s">
                热线：400-123-4567</p>
        </div>
    </div>
    <br />
    <div class="text-center">
        版权所有 © Pintuer.com All Rights Reserved，图ICP备：380959609</div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="footer-sitemap">
                        含网站地图的导航
                    </h3>
						<p class="doc-readme">
							含站点地图的导航，在手机下，采用.hidden-l样式，也可以将导航内容隐藏。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container-layout bg-gray bg-inverse padding-big-top padding-big-bottom">
									<div class="table-responsive padding hidden-l">
										<ul class="nav nav-sitemap">
											<li><a href="#">新闻资讯</a>
												<ul>
													<li><a href="#">新闻公告</a> </li>
													<li><a href="#">业界资讯</a> </li>
													<li><a href="#">媒体报道</a> </li>
												</ul>
											</li>
											<li><a href="#">产品中心</a>
												<ul>
													<li><a href="#">产品分类</a> </li>
													<li><a href="#">产品品牌</a> </li>
													<li><a href="#">产品特色</a> </li>
												</ul>
											</li>
											<li><a href="#">技术反馈</a>
												<ul>
													<li><a href="#">售后服务</a> </li>
													<li><a href="#">营销网络</a> </li>
													<li><a href="#">服务支持</a> </li>
												</ul>
											</li>
											<li><a href="#">留言反馈</a> </li>
											<li><a href="#">联系方式</a> </li>
										</ul>
									</div>
									<div class="text-center">
										版权所有 © Pintuer.com All Rights Reserved，图ICP备：380959609</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container-layout bg-gray bg-inverse padding-big-top padding-big-bottom">
    <div class="table-responsive padding hidden-l">
        <ul class="nav nav-sitemap">
            <li><a href="#">新闻资讯</a>
                <ul>
                    <li><a href="#">新闻公告</a> </li>
                    <li><a href="#">业界资讯</a> </li>
                    <li><a href="#">媒体报道</a> </li>
                </ul>
            </li>
            <li><a href="#">产品中心</a>
                <ul>
                    <li><a href="#">产品分类</a> </li>
                    <li><a href="#">产品品牌</a> </li>
                    <li><a href="#">产品特色</a> </li>
                </ul>
            </li>
            <li><a href="#">技术反馈</a>
                <ul>
                    <li><a href="#">售后服务</a> </li>
                    <li><a href="#">营销网络</a> </li>
                    <li><a href="#">服务支持</a> </li>
                </ul>
            </li>
            <li><a href="#">留言反馈</a> </li>
            <li><a href="#">联系方式</a> </li>
        </ul>
    </div>
    <div class="text-center">
        版权所有 © Pintuer.com All Rights Reserved，图ICP备：380959609</div>
</div>
</xmp>
						</div>
						<h2 class="doc-h2" id="other">
                        其他
                    </h2>
						<p class="doc-lead">
						</p>
						<h3 class="doc-h3" id="other-sliders">
                        全屏左/右浮动箭头&nbsp;<span class="tag bg-yellow">新增</span>
                    </h3>
						<p class="doc-readme">
							全屏漂浮在屏幕左侧/右侧的浮动箭头。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<a href="javascript:;" class="button button-small" id="btn-page-sliders">显示</a>
								<div id="sliders-left" class="sliders-left">
								</div>
								<div id="sliders-right" class="sliders-right">
								</div>
							</div>
							<script>
								$(function() {
									$("#btn-page-sliders").click(function() {
										$("#sliders-left,#sliders-right").addClass("active");
									});
								});
							</script>
						</div>
						<div class="doc-democode doc-codead0">
<xmp>
/*默认样式,不显示*/
<div class="sliders-left">
</div>
<div class="sliders-right">
</div>
/*如果默认要显示请增加 active 样式*/
<div class="sliders-left active">
</div>
<div class="sliders-right active">
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="other-404">
                        404错误页&nbsp;<span class="tag bg-yellow">新增</span>
                    	</h3>
						<p class="doc-readme">
							404错误页-屌丝版</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container" style="width: 100%;">
									<div class="panel margin-big-top">
								    <div class="text-center">
											<br>
											<h2  class="padding-top">
												<stong>404错误！抱歉您要找的页面不存在</stong>
											</h2>
											<div class="">
											<div class="float-left">
												<img src="images/ds-1.gif">
												<div class="alert">
													卧槽！页面不见了！
												</div>
											</div>
											<div class="float-right">
												<img src="images/ds-2.png" width="260">
											</div>
											</div>
											<div class="padding-big">
												<a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a>
												<a href="/blog/?post=3" class="button">保证不打死管理员</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container">
	<div class="panel margin-big-top">
	<div class="text-center">
			<br>
			<h2  class="padding-top">
				<stong>404错误！抱歉您要找的页面不存在</stong>
			</h2>
			<div class="">
			<div class="float-left">
				<img src="http://www.pintuer.com/images/ds-1.gif">
				<div class="alert">
					卧槽！页面不见了！
				</div>
			</div>
			<div class="float-right">
				<img src="http://www.pintuer.com/images/ds-2.png" width="260">
			</div>
			</div>
			<div class="padding-big">
				<a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a>
				<a href="/blog/?post=3" class="button">保证不打死管理员</a>
			</div>
	</div>
	</div>
</div>
</xmp>
						</div>
						<p class="doc-readme">
							404错误页-卖萌版</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container" style="width: 100%;">
								<div class="panel margin-big-top">
							    <div class="text-center">
										<br>
										<br>
										<img src="images/mm-1.jpg" class="radius" width="500" />
										<h2  class="padding-top">
											<stong>404错误！咦！该页面是被耗子们啃了？</stong>
										</h2>
										<div class="padding-big">
											<a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a>
											<a href="/blog/?post=3" class="button">反馈</a>
										</div>
									</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container">
	<div class="panel margin-big-top">
	<div class="text-center">
			<br>
			<br>
			<img src="http://www.pintuer.com/images/mm-1.jpg" class="radius" width="500" />
			<h2  class="padding-top">
				<stong>404错误！咦！该页面是被耗子们啃了？</stong>
			</h2>
			<div class="padding-big">
				<a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a>
				<a href="/blog/?post=3" class="button">反馈</a>
			</div>
	</div>
	</div>
</div>
</xmp>
						</div>
						<p class="doc-readme">
							404错误页-外星人劫持版</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container" style="width: 100%;">
									<div class="panel margin-big-top">
								    <div class="text-center">
											<br>
											<h2  class="padding-top">
												<stong>404错误！抱歉您要找的页面已被外星人劫持</stong>
											</h2>
											<img src="images/wxr-1.jpg" width=500 height=500 />
											<div class="padding-big">
												<a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a>
												<a href="/blog/?post=3" class="button">投诉外星人</a>
											</div>
									</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container">
	<div class="panel margin-big-top">
	<div class="text-center">
		<br>
		<h2  class="padding-top">
			<stong>404错误！抱歉您要找的页面已被外星人劫持</stong>
		</h2>
		<img src="http://www.pintuer.com/images/wxr-1.jpg" width=500 height=500 />
		<div class="padding-big">
			<a href="http://www.pintuer.com/" class="button bg-yellow">返回首页</a>
			<a href="/blog/?post=3" class="button">投诉外星人</a>
		</div>
	</div>
	</div>
</div>
</xmp>
						</div>
						<h3 class="doc-h3" id="other-popo">
                        	气泡对话框&nbsp;<span class="tag bg-yellow">新增</span>
                    	</h3>
						<p class="doc-readme">
							基本样式，已内置橙色、蓝色、绿色风格，如需其它风格自行增加。</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container" style="width: 100%;">
									<div class="popo">
										<div class="popo-left">
											<div class="ico-left"></div>
											<div class="popo-body left">
												您好，我是默认颜色、无圆角、无阴影的气泡对话框！
											</div>
										</div>
									</div>
									<div class="popo">
										<div class="popo-right">
											<div class="ico-right "></div>
											<div class="popo-body popo-yellow right radius box-shadow-small">
												您好，我是橙色、有圆角、有阴影的气泡对话框！
											</div>
										</div>
									</div>
									<div class="popo">
										<div class="popo-left">
											<div class="popo-body popo-blue left box-shadow-big">你好，我是蓝色、无圆角、有大阴影的气泡对话框！</div>
										</div>
									</div>
									<div class="popo">
										<div class="popo-right">
											<div class="popo-body popo-green right radius box-shadow">
												你好，我是绿色、有圆角、有阴影的气泡对话框！<img src="images/300x200.png" class="img-responsive">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container" style="width: 100%;">
	<div class="popo">
		<div class="popo-left">
			<div class="ico-left"></div>
			<div class="popo-body left">
				您好，我是默认颜色、无圆角、无阴影的气泡对话框！
			</div>
		</div>
	</div>
	<div class="popo">
		<div class="popo-right">
			<div class="ico-right "></div>
			<div class="popo-body popo-yellow right radius box-shadow-small">
				您好，我是橙色、有圆角、有阴影的气泡对话框！
			</div>
		</div>
	</div>
	<div class="popo">
		<div class="popo-left">
			<div class="popo-body popo-blue left box-shadow-big">你好，我是蓝色、无圆角、有大阴影的气泡对话框！</div>
		</div>
	</div>
	<div class="popo">
		<div class="popo-right">
			<div class="popo-body popo-green right radius box-shadow">
				你好，我是绿色、有圆角、有阴影的气泡对话框！
			</div>
		</div>
	</div>
</div>
</xmp>
						</div>

						<p class="doc-readme">
							对话</p>
						<div class="doc-demoview doc-viewad0 ">
							<div class="view-body">
								<div class="container" style="width: 100%;">
									<div class="line marggin-small">
										<div class="x2 text-right">
											<div style="width: 60px;text-align: center;float: right;">
												<img src="test/images/425acca8242e2531df45c3857d08a92b.jpg" width="64" height="64" class="img-responsive img-border radius-circle">
												<strong>陆毅</strong>
											</div>
										</div>
										<div class="x10">
											<div class="popo">
												<div class="popo-left">
													<div class="popo-body popo-blue left radius box-shadow">我是世界上最帅的男人，你知道么？</div>
												</div>
											</div>
										</div>

									</div>
									<div class="line marggin-small">
										<div class="x10">
											<div class="popo">
												<div class="popo-right">
													<div class="popo-body popo-green right radius box-shadow"> 谁？你说谁？葛优大哥才是最帅的男人！ </div>
												</div>
											</div>
										</div>
										<div class="x2 text-left">
											<div style="width: 60px;text-align: center;">
											<img src="test/images/4819b2b05b46750bad716e3d177739c7.jpg" width="64" height="64" class="img-responsive img-border radius-circle">
											<strong>男百合</strong>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="doc-democode doc-codead0 ">
<xmp>
<div class="container" style="width: 100%;">
	<div class="line marggin-small">
		<div class="x2 text-right">
			<div style="width: 60px;text-align: center;float: right;">
				<img src="test/images/425acca8242e2531df45c3857d08a92b.jpg" width="64" height="64" class="img-responsive img-border radius-circle">
				<strong>陆毅</strong>
			</div>
		</div>
		<div class="x10">
			<div class="popo">
				<div class="popo-left">
					<div class="popo-body popo-blue left radius box-shadow">我是世界上最帅的男人，你知道么？</div>
				</div>
			</div>
		</div>

	</div>
	<div class="line marggin-small">
		<div class="x10">
			<div class="popo">
				<div class="popo-right">
					<div class="popo-body popo-green right radius box-shadow"> 谁？你说谁？葛优大哥才是最帅的男人！ </div>
				</div>
			</div>
		</div>
		<div class="x2 text-left">
			<div style="width: 60px;text-align: center;">
				<img src="test/images/4819b2b05b46750bad716e3d177739c7.jpg" width="64" height="64" class="img-responsive img-border radius-circle">
				<strong>男百合</strong>
			</div>
		</div>
	</div>
</div>
</xmp>
						</div>
					</div>
					<!--list.end-->
				</div>
				<div class="hidden-l hidden-s xm3 xb3">
					<div class="sidebar doc-sidebar fadein-left">
						<ul class="sidenav nav spy fixed" data-offset-fixed="270" data-offset-spy="160">
							<li><a href="#overview">概述</a>
								<ul>
								</ul>
							</li>
							<li><a href="#header">头部</a>
								<ul>
									<li><a href="#header-demo">基本样式</a> </li>
									<li><a href="#header-search">综合型头部</a> </li>
									<li><a href="#header-inverse">背景反色</a> </li>
								</ul>
							</li>
							<li><a href="#navbar">导航条</a>
								<ul>
									<li><a href="#navbar-demo">基本样式</a> </li>
									<li><a href="#navbar-units">组成元件</a> </li>
									<li><a href="#navbar-bg">导航条背景色</a> </li>
									<li><a href="#navbar-big">大导航条</a> </li>
									<li><a href="#navbar-fixed">固定在顶部或底部</a> </li>
									<li><a href="#navbar-slidemenu">滑动导航</a> </li>
								</ul>
							</li>
							<li><a href="#bread">面包屑</a>
								<ul>
									<li><a href="#bread-local">路径导航</a> </li>
									<li><a href="#bread-step">步骤指导</a> </li>
								</ul>
							</li>
							<li><a href="#list">列表</a>
								<ul>
									<li><a href="#list-text">文本列表</a> </li>
									<li><a href="#list-box">文本块</a> </li>
									<li><a href="#list-media">媒体列表</a> </li>
									<li><a href="#list-midea-box">媒体块</a> </li>
								</ul>
							</li>
							<li><a href="#pagination">分页</a>
								<ul>
									<li><a href="#page-demo">基本样式</a> </li>
									<li><a href="#pagination-size">尺寸及颜色</a> </li>
									<li><a href="#pager">翻页</a> </li>
									<li><a href="#pointer">点式分页</a> </li>
								</ul>
							</li>
							<li><a href="#form">表单</a>
								<ul>
									<li><a href="#form-base">常规表单</a> </li>
									<li><a href="#form-other">特殊表单</a> </li>
									<li><a href="#form-editer">编辑器</a> </li>
								</ul>
							</li>
							<li><a href="#content">内容</a>
								<ul>
									<li><a href="#content-key">大屏介绍</a> </li>
									<li><a href="#detail">内容详情</a> </li>
								</ul>
							</li>
							<li><a href="#footer">底部</a>
								<ul>
									<li><a href="#footer-demo">基本样式</a> </li>
									<li><a href="#footer-navbar">带导航条的底部</a> </li>
									<li><a href="#footer-sitemap">含网站地图的导航</a> </li>
								</ul>
							</li>
							<li><a href="#other">其他</a>
								<ul>
									<li><a href="#other-sliders">左右浮动箭头</a></li>
									<li><a href="#other-404">404错误页</a> </li>
									<li><a href="#other-popo">气泡对话框</a> </li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="container doc-footer">
			版权所有 &copy; <a href="">Pintuer.com</a> All Rights Reserved.</div>
		<div class="doc-backtop win-backtop icon-arrow-circle-up">
		</div>
        <script src="plugins/layer/layer.js"></script>
        <script src="plugins/zclip/jquery.zclip.min.js"></script>
        <script src="plugins/site.js"></script>
	</body>

</html>
